:root {
  /* radius-size #Currently internal variables */
  --rt-radius-s: 4px;
  --rt-radius-m: 8px;
  --rt-radius-l: 12px;

  /* font-size # Currnetly internal variables */
  --rt-size-8: 8px;
  --rt-size-9: 9px;
  --rt-size-10: 10px;
  --rt-size-11: 11px;
  --rt-size-12: 12px;
  --rt-size-13: 13px;
  --rt-size-14: 14px;
  --rt-size-15: 15px;
  --rt-size-16: 16px;
  --rt-size-17: 17px;
  --rt-size-18: 18px;
  --rt-size-19: 19px;
  --rt-size-20: 20px;
  --rt-size-21: 21px;
  --rt-size-22: 22px;
  --rt-size-23: 23px;
  --rt-size-24: 24px;
  --rt-size-25: 25px;
  --rt-size-26: 26px;

  /* Deprecated. rem */
  --rt-rem-root-value: 100;
  --rt-size-rem-8: calc(var(--rt-size-8) / var(--rt-rem-root-value) * 1rem);
  --rt-size-rem-10: calc(var(--rt-size-10) / var(--rt-rem-root-value) * 1rem);
  --rt-size-rem-12: calc(var(--rt-size-12) / var(--rt-rem-root-value) * 1rem);
  --rt-size-rem-14: calc(var(--rt-size-14) / var(--rt-rem-root-value) * 1rem);
  --rt-size-rem-16: calc(var(--rt-size-16) / var(--rt-rem-root-value) * 1rem);
  --rt-size-rem-18: calc(var(--rt-size-18) / var(--rt-rem-root-value) * 1rem);
  --rt-size-rem-20: calc(var(--rt-size-20) / var(--rt-rem-root-value) * 1rem);
  --rt-size-rem-22: calc(var(--rt-size-22) / var(--rt-rem-root-value) * 1rem);
  --rt-size-rem-24: calc(var(--rt-size-24) / var(--rt-rem-root-value) * 1rem);
  --rt-size-rem-26: calc(var(--rt-size-26) / var(--rt-rem-root-value) * 1rem);
  --rt-size-rem-28: calc(var(--rt-size-28) / var(--rt-rem-root-value) * 1rem);
  --rt-size-rem-30: calc(var(--rt-size-30) / var(--rt-rem-root-value) * 1rem);

  /* color # variables should be exposed to users */
  --rt-color-primary: #4a77f8;
  --rt-color-success: #00b578;
  --rt-color-warning: #ff8f1f;
  --rt-color-danger: #ff3141;
  --rt-color-yellow: #ff9f18;
  --rt-color-orange: #ff6430;
  --rt-color-wathet: #e7f1ff;

  /* other color # variables should be exposed to users */
  --rt-color-text: #333333;
  --rt-color-text-secondary: #666666;
  --rt-color-weak: #999999;
  --rt-color-light: #cccccc;
  --rt-color-border: #ebebeb;
  --rt-color-border-secondary: #d9d9d9;
  --rt-color-background: #ffffff;
  --rt-color-background-secondary: #bbb1b2;

  /* other color # variables should be exposed to users */
  --rt-color-highlight: var(--rt-color-danger);
  --rt-color-text-light-solid: #ffffff;
  --rt-color-text-dark-solid: #000000;
  --rt-color-fill-content: #f5f5f5;
  --rt-color-background-body: var(--rt-color-background);
  --rt-font-main: var(--rt-size-12);
  --rt-font-family: -apple-system, blinkmacsystemfont, "Helvetica Neue",
    helvetica, segoe ui, arial, roboto, "PingFang SC", "miui",
    "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
}
